<template>
  <div class='container'>
    <el-card class="box-card">
    <!-- input框 -->
    <div class="box-header">
    <span class="bolder" >学科名称</span>
    <el-input v-model="page.subjectName" size="small" style="width: 190px"></el-input>
    <el-button style="margin-left:10px" size="small" @click="clear" >清除</el-button>
    <el-button type="primary" size="small" @click="btnSs">搜索</el-button>
    <el-button type="success" style="margin-left:795px"  size="small"
    @click="addFn"><i class="el-icon-edit" ></i>
      新增学科</el-button>
    </div>
    <!-- 表单 -->
    <el-alert
          style="margin-bottom: 15px;"
          show-icon
          :title="`数据一共 ${page.counts} 条`"
          type="info"
          :closable="false"
        />
    <!-- tabel表格 -->
    <el-table
    ref="singleTable"
    highlight-current-row
    style="width: 100%"
    :data="tabelList">
    <el-table-column
    type="index" label="序号">
    </el-table-column>
    <el-table-column
      label="学科名称"
      prop="subjectName">
    </el-table-column>
    <el-table-column
      label="创建者"
      prop="username">
    </el-table-column>
    <el-table-column
      prop="addDate"
      label="创建日期">
      <template slot-scope="{ row }">
          <!-- 时间格式化 -->
          {{ row.addDate | parseTimeByString }}
        </template>
    </el-table-column>
    <el-table-column
      prop="isFrontDisplay"
      label="前台是否显示">
      <span slot-scope="scope" class="ziti">
              {{ scope.row.isFrontDisplay === 1 ? "否" : "是" }}
            </span>
    </el-table-column>
    <el-table-column
      prop="twoLevelDirectory"
      label="二级目录">
    </el-table-column>
    <el-table-column
      prop="tags"
      label="标签">
    </el-table-column>
    <el-table-column
      prop="totals"
      label="题目数量"
      >
    </el-table-column>
    <!-- 注释 -->
    <el-table-column
      label="操作" width="240px">
      <template slot-scope="{row}">
      <el-button  type="text" @click="$router.push(`directorys?id=${row.id}&name=${row.subjectName}`)">学科分类</el-button>
        <el-button type="text" @click="$router.push(`tags?id=${row.id}&name=${row.subjectName}`)">学科标签</el-button>
        <el-button  type="text"  @click="editFn(row.id)">修改</el-button>
        <el-button type="text" @click="delFn(row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-row>
          <el-col :span="5" :offset="16">
            <div class="block" style="margin-left: 30px;">
              <el-pagination
                background
                :current-page="+page.page"
                :page-size="+page.pagesize "
                :total="page.counts"
                :page-sizes="[5,10,20,50]"
                layout="prev, pager, next,sizes, jumper"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                style="margin-top: 20px;"
              />
            </div>
          </el-col>
        </el-row>
  </el-card>
  <!-- 放置弹层 -->
  <el-dialog title="新增学科" :visible="showDialog" @close="btnCancel" width ="400px"  >
    <el-form label-width="80px" :model="formData"  ref="formData">
      <el-form-item label="学科名称" prop="subjectName" required>
        <el-input v-model="formData.subjectName" placeholder="请输入学科名称" size="small"></el-input>
      </el-form-item>
      <el-form-item label="是否显示" porp="isFrontDisplay" >
        <el-switch active-color="#13ce66" v-model="formData.isFrontDisplay">
        </el-switch>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer" style="text-align: right;">
    <el-button @click="btnCancel">取 消</el-button>
    <el-button type="primary" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
  </div>
</template>

<script>
import { simple, list, remove, add, detail, update } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      formData: {
        subjectName: '',
        isFrontDisplay: true
      },
      page: {
        page: 1, // 页码
        pagesize: 10, // 每页条数
        subjectName: '',
        total: 0,
        counts: 0,
        pages: 0
      },
      tabelList: [],
      showDialog: false
      // getList: {
      //   page: '', // 页数
      //   page-size: '' // 一页多少个

      // }
    }
  },
  created () {
    this.getList()
    this.simple()
  },
  methods: {
    async getList () {
      const { data } = await list(this.page)
      // console.log(data)
      this.tabelList = data.items
      this.page.counts = data.counts
    },
    async simple () {
      await simple()
      // console.log(data)
    },
    addFn () {
      this.showDialog = true
    },
    async delFn (id) {
      console.log(id)
      await this.$confirm('你确定要删除吗')
      await remove({ id })
      this.getList()
      this.$message('删除成功')
    },
    btnCancel () {
      this.$refs.formData.resetFields()
      this.showDialog = false
    },
    async editFn (id) {
      const { data } = await detail({ id })
      console.log(data)
      this.formData = data
      this.formData.isFrontDisplay = !!this.formData.isFrontDisplay
      this.showDialog = true
    },
    async btnOk () {
      if (this.formData.id) {
        await update(this.formData)
      } else {
        console.log(111)
        await add(this.formData)
      }

      this.getList()
      this.showDialog = false
      this.$message('操作成功')
    },
    currentPage (page) {
      // 更新页码
      this.page.page = page * 1
      // 更新页面
      this.getList(this.page)
    },
    handleSizeChange (val) { // 控制每页有几条
      // console.log(`每页 ${val} 条`)
      this.page.pagesize = val * 1
      this.getList(this.page)
    },
    handleCurrentChange (val) { // 跳转页数
      // console.log(`当前页: ${val}`)
      this.page.page = val
      this.getList(this.page)
    },
    async btnSs () {
      // 清理页码
      this.page.page = 1
      await this.getList(this.page)
    },
    clear () {
      this.page = {}
      this.getList()
    }

  }
}
</script>

<style scoped>
.box-header{
  margin-bottom: 15px;
}

span {
  font-size: 15px;
  margin: 0 15px;
  font-weight: 700;
}
.dingwei {
  float: right;
  margin-right: 50px;
}
.huise {
  width: 100%;
  height: 40px;
  background-color: #f4f4f5;
  line-height: 40px;
  font-weight: normal;
  font-size: 15px;
  color: #909399;
}
.ziti {
  font-size: 14px;
  font-weight: normal;
}

.bolder {
  font-size: 14px;
  color:#606266;
  font-weight: 700;
}
</style>
